<template>
  <div>
    <div class="products">
      <div class="container">
        This is ProductList
      </div>
        <product-item :products="products"></product-item>
    </div>
  </div>
</template>

<style>
.product {
  border-bottom: 1px solid black;
}

.product__image {
  width: 100px;
  height: 100px;
}
</style>

<script>
import ProductItem from './ProductItem'
export default {
  name: 'product-list',
  components: {
    'product-item': ProductItem
  },
  created () {
    if (this.products.length === 0) {
      // 请求数据
      this.$store.dispatch('allProducts')
    }
  },
  computed: {
    // a computed getter
    products () {
      return this.$store.getters.allProducts
    }
  },
  methods: {
    addToCart (product) {
      this.$store.commit('ADD_TO_CART', {
        product
      })
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>
